<template>
  <div class="page-container">
    <el-card shadow="never" class="search-form-card">
      <el-form class="search-form" inline label-width="75px" label-suffix=":">
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="服务状态">
              <el-select v-model="searchParams.status" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请时间">
              <el-date-picker
                v-model="searchParams.timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工具名称">
              <el-input v-model="searchParams.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div style="margin-bottom: 30px" />
    <el-card shadow="never">
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="openDraw">发布申请</el-button>
          <el-button type="primary">批量上架</el-button>
        </el-form-item>
      </el-form>
      <div class="table-box">
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column prop="createTime" label="申请时间" align="center" />
          <el-table-column prop="name" label="工具名称" align="center" />
          <el-table-column prop="createDeptName" label="提供部门" align="center" />
          <el-table-column prop="statusName" label="服务状态" align="center" />
          <el-table-column prop="onlineTime" label="上架时间" align="center" />
          <el-table-column label="服务推荐" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.recommend"
                :active-value="true"
                :inactive-value="false"
                @change="(val) => handleChangeRecommend(scope.row,val)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="160px">
            <!--            操作，场景0	无条件显示	详情，涉及接口：数据工具发布详情-->
            <!--            操作，场景1	status=online	下架，涉及接口：上架/下架-->
            <!--            操作，场景2	status=offline	上架，涉及接口：上架/下架-->
            <!--            操作，场景3	status=rejection	重新申请，涉及接口：修改数据工具-->
            <!--            操作，场景4	status=default	编辑，涉及接口：修改数据工具-->
            <!--            操作，场景5	status=in_review 且 notStartAudit = false	撤销审核，涉及接口：撤销审核-->
            <!--            操作，场景6	status=in_review 且 notStartAudit = true	编辑(页面隐藏保存并提交按钮)、撤销审核，涉及接口：修改数据工具、撤销审核-->
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogDetail(scope.row)"
              >详情</el-button>
              <el-button
                v-if="scope.row.status === 'online'"
                type="text"
                @click="handleChangeUp(scope.row, false, 'online')"
              >下架</el-button>
              <el-button
                v-if="scope.row.status === 'offline'"
                type="text"
                @click="handleChangeUp(scope.row, true)"
              >上架</el-button>
              <el-button
                v-if="scope.row.status === 'rejection'"
                type="text"
                @click="dialogEdit(scope.row, true, 'rejection')"
              >重新申请</el-button>
              <el-button
                v-if="scope.row.status === 'default'"
                type="text"
                @click="dialogEdit(scope.row)"
              >编辑</el-button>
              <el-button
                v-if="scope.row.status === 'in_review' && !scope.row.notStartAudit"
                type="text"
                @click="handleRevoke(scope.row)"
              >撤销审核</el-button>
              <el-button
                v-if="scope.row.status === 'in_review' && scope.row.notStartAudit"
                type="text"
                @click="dialogEdit(scope.row)"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
    <ServePublishForm ref="servePublishForm" title="数据工具发布申请" @save="initData" />
    <ServeEditForm ref="serveEditForm" title="数据工具发布申请" @save="initData" />
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import ServePublishForm from './publishItem'
import ServeEditForm from './editItem'
import { mapGetters } from 'vuex'
import { http_serve_audit_process, http_serve_publish_tool } from '@/api'
export default {
  computed: {
    ...mapGetters(['enum']),
    statusList() {
      return this.enum['PublishDataStatusType'] || []
    }
  },
  components: {
    ServePublishForm,
    ServeEditForm
  },
  mixins: [crud],
  data() {
    return {
      request: http_serve_publish_tool,
      searchParams: {
        name: '',
        timeValue: [],
        status: ''
      },
      columns: [
      ],
      tableData: [

      ]
    }
  },
  methods: {
    formatTableData(data) {
      data.forEach(v => {
        v.statusName = this.statusList.find(e => e.value === v.status).name
      })
      console.log(this.tableData)
    },
    // 推荐
    handleChangeRecommend(rowItem, value) {
      this.request.recommend({
        id: rowItem.id
      }, { recommend: value })
        .finally(() => {
          this.initData()
        })
    },
    // 上架/下架
    handleChangeUp(rowItem, value) {
      this.request.upOrDown({
        id: rowItem.id
      }, {
        online: value
      }).finally(() => {
        this.initData()
      })
    },
    // 撤销审核
    handleRevoke(rowItem) {
      this.$confirm('确认撤销审核？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          http_serve_audit_process.revoke({
            id: rowItem.id
          }, {}).finally(() => {
            this.initData()
          })
        })
    },
    // 详情
    dialogDetail(item) {
      this.$router.push({
        path: '/serve-publish/tool-detail/publish/' + item.id + '/' + (item.auditRequestId || '')
      })
    },
    // 编辑
    dialogEdit(rowItem) {
      this.$refs.serveEditForm.open(rowItem)
    },
    openDraw() {
      this.$refs.servePublishForm.open()
    }

  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
}
</style>
